<template>
  <div :class="[size,'submit_button']" :style="{'--primary-color':primaryColor,'--secondary-color':secondaryColor}">
    <button>
      <slot/>
    </button>
  </div>
</template>

<script>
export default {
  name: "SubmitButton",
  props: {
    primaryColor: {
      type: String,
      default: 'black'
    },
    secondaryColor: {
      type: String,
      default: 'white'
    },
    size: String
  }
}
</script>

<style scoped lang="less">
.submit_button {
  --button-height: 40px;
  --button-padding: 24px;
  --primary-color: black;
  --secondary-color: white;

  &.small {
    --button-height: 28px;
    --button-padding: 16px;
  }

  &.large {
    --button-height: 48px;
    --button-padding: 30px;
  }

  width: -moz-fit-content;
  width: fit-content;
  font-weight: 900;
  font-size: calc(var(--button-height) / 2.5);
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-select: none;

  & > button {
    font-weight: inherit;
    letter-spacing: 1px;
    outline: none;
    border: none;
    cursor: pointer;
    height: var(--button-height);
    color: var(--secondary-color);
    padding: 0 var(--button-padding);
    background-color: var(--primary-color);
    border-radius: var(--button-height);
    transition: all .3s ease;

    &:hover {
      color: var(--primary-color);
      background-color: var(--secondary-color);
    }

    &:active {
      color: var(--secondary-color);
      transition: all .1s ease;
      background-color: var(--primary-color);
    }
  }
}
</style>